$(function () {
  initCateList()
  // 封装初始化文章分类的函数
  function initCateList() {
    // 发请求拿数据
    // 把拿到的数据渲染到表格当中
    axios.get('/my/cate/list').then(({ data: res }) => {
      const rows = []
      res.data.forEach(function (item, index) {
        rows.push(`
        <tr>
            <td>${index + 1}</td>
            <td>${item.cate_name}</td>
            <td>${item.cate_alias}</td>
            <td>
              <button type="button" class="layui-btn layui-btn-xs btn-edit" data-my="${item.id}">修改</button>
              <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-delete" data-id="${item.id}">删除</button>
            </td>
          </tr>
        `)
        $('tbody').html(rows)
      })
    })
  }

  // 点击按钮,展示添加的弹出层
  let arr = null
  $('#btnShowAdd').on('click', function () {
    // layui中的弹出层
   arr = layer.open({
      type:1,
      area:['450px','260px'],
      title: '添加文章分类'
      , content: $('#template-add').html()
    });     
  })

  // 自定义校验规则
  layui.form.verify({
    // 分类名称
    pass: [
      /^[\S]{1,10}$/
      ,'密码必须是非空字符串、长度为 1-10'
    ],
    // 分类别名
    alias: [/^[a-zA-Z0-9]{1,15}$/,'只能是字母数字、长度为 1-15']
  })


  // 用事件委托的方法监听form表单事件
  $('body').on('submit', '#form-add', function (e) {
    // 阻止默认行为
    e.preventDefault()
    console.log('ok');
    // 一次性获取表单中的所有数据
    let data = $('#form-add').serialize()
    axios.post('/my/cate/add', data).then(({ data: res }) => {
      console.log(res);
      if (res.code === 0) {
        // 1.提示用户
        layer.msg('添加分类成功')
        // 2.刷新分类的列表数据
        initCateList()
        // 3.清除弹出框
        layer.close(arr)
      }
    })
  })

  // 用事件委托的方式点击修改按钮
  let add = null
  $('tbody').on('click', '.btn-edit', function () {
    // 通过attr()获取到的属性的值,一定是字符串
    let id = $(this).attr('data-my')
    if (id==1||id==2) {
      return layer.msg('不能修改此条数据')
    }
     // layui中的弹出层
    add = layer.open({
    type:1,
    area:['450px','260px'],
    title: '修改文章分类',
    content: $('#template-del').html()
    });
    // 回显数据
    // 发送请求

    axios.get('/my/cate/info', {
      // 请求参数
      params:{id}
    }).then(({data: res}) => {
      if (res.code === 0) {
        // 实现表单的数据回显
        layui.form.val('form-edit',res.data)
      }
    })
  })



  // 监听修改表单的submit事件
  $('body').on('submit', '#form-edit', function (e) {
    e.preventDefault()
    const data = $(this).serialize()
    axios.put('/my/cate/info', data).then(({ data: res }) => {
      if (res.code === 0) {
        layer.msg('更新分类成功')
        // 清除弹出框
        layer.close(add)
        // 2.刷新分类的列表数据
        initCateList()
      }
    })
  })


  // 通过事件委托点击删除按钮删除内容
  $('body').on('click', '.btn-delete', function () {
    const id = $(this).attr('data-id')
    if (id == 1 || id == 2) {
      return layer.msg('不允许删除第一行和第二行')
    }
    // console.log('ok');
    layer.confirm('确认删除吗?', {icon: 6, title:'提示'}, function(index){
      axios.delete('/my/cate/del', {
        params:{id}
      }).then(({ data: res }) => {
        console.log(res);
        // 判断删除成功
        if (res.code === 0) {
          layer.msg('删除成功')
           // 2.刷新分类的列表数据
           initCateList()
        }
      })

      layer.close(index);
    });

    
    
      

  })




})